<!doctype html>
<html lang="zxx">
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <link rel="stylesheet" href="/css/owl.theme.default.min.css">

    <link rel="stylesheet" href="/css/owl.carousel.min.css">

    <link rel="stylesheet" href="/css/remixicon.css">

    <link rel="stylesheet" href="/css/meanmenu.min.css">

    <link rel="stylesheet" href="/css/animate.min.css">

    <link rel="stylesheet" href="/css/style.css">

    <link rel="stylesheet" href="/css/responsive.css">

    <link rel="stylesheet" href="/layui/css/layui.css">


    <title>支付页面</title>
    <style>

        .navbar-category-dropdown {
            display: none; /* 默认隐藏 */
            position: absolute; /* 绝对定位脱离文档流 */
            z-index: 1000; /* 确保悬浮层在最上层 */
            background: #fff; /* 背景色防止透明 */
            box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 添加阴影增强层次感 */
            min-width: 200px; /* 设置最小宽度避免内容挤压 */
        }

        .navbar-category:hover .navbar-category-dropdown {
            display: block; /* 鼠标悬停父容器时显示下拉层 */
        }

        .navbar-category-dropdown {
            opacity: 0;
            transition: opacity 0.3s ease;
            top: 100%; /* 下拉层紧贴父容器底部 */
        }
        .navbar-category:hover .navbar-category-dropdown {
            opacity: 1;
        }
    </style>
</head>
<body>
<input  type="hidden" id="userId" th:value="${session.USER_LOGIN.id}"/>
<div class="preloader">
    <div class="content">
        <div class="box"></div>
    </div>
</div>


<header class="header-area">
    <div class="top-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <ul class="header-left-content">
                        <li>
                            <a href="about.html">
                                关于我们
                            </a>
                        </li>
                        <li>
                            <a href="store-location.html">
                                店铺地址
                            </a>
                        </li>
                        <li>
                            需要帮助? Call:
                            <a href="tel:+1-(514)-321-4567">
                                <span>+1 (514) 321-4567</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <div class="header-right-content">
                        <ul>
                            <li>
                                <a href="/page/mycount">登录账号</a>
                            </li>
                            <li>
                                <a href="/page/dashboard">个人信息</a>
                            </li>
                            <li>
                                <div class="navbar-option-item navbar-option-language dropdown language-option">
                                    <button class="dropdown-toggle" type="button" id="language2"
                                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="lang-name">English</span>
                                    </button>
                                    <div class="dropdown-menu language-dropdown-menu" aria-labelledby="language2">
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/english.png" alt="Image">
                                            English
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/deutsch.png" alt="Image">
                                            Deutsch
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/china.png" alt="Image">
                                            简体中文
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/arbic.png" alt="Image">
                                            العربيّة
                                        </a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="middle-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-3">
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="Image">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="navbar-area only-home-one-sticky">
        <div class="mobile-responsive-nav">
            <div class="container">
                <div class="mobile-responsive-menu">
                    <!--  导航侧边栏  -->
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="logo">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="desktop-nav">
            <div class="container">
                <nav class="navbar navbar-expand-md navbar-light">
                    <div class="navbar-category">
                        <button type="button">
                            <i class="ri-menu-line"></i>
                            全部分类
                            <i class="arrow-down ri-arrow-down-s-line"></i>
                        </button>
                        <div class="navbar-category-dropdown">
                            <ul id="categorylist">
                            </ul>
                        </div>
                    </div>
                    <div class="collapse navbar-collapse mean-menu" id="navbarSupportedContent">
                        <ul class="navbar-nav">
                            <li class="nav-item float-end">
                                <a href="/page/index" class="nav-link active">
                                    首页
                                </a>
                            </li>
                            <li class="nav-item mega-menu">
                                <a href="/page/products" class="nav-link">
                                    全部商品
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/dashboard" class="nav-link">
                                    个人信息管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/cart" class="nav-link">
                                    我的购物车
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>
<h2 style="text-align: center">请用支付宝扫码支付</h2>
<div style="text-align: center">
    <img src="" id="qrcode">
</div>


<div class="footer-area pt-54 pb-30">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-sm-6">
                <div class="single-footer-widget">
                    <h3>Quick Information</h3>
                    <ul class="info-list">
                        <li>
                            <i class="ri-map-pin-line"></i>
                            2491 Reel Avenue Albuquerque, NM
                        </li>
                        <li>
                            <i class="ri-phone-line"></i>
                            <a href="tel:+1-(514)-321-4566">+1 (514) 321-4566</a>
                        </li>
                        <li>
                            <i class="ri-mail-send-line"></i>
                            <a href="javascript:;"><span class="__cf_email__"
                                                         data-cfemail="0164696078416479606c716d642f626e6c">[email&#160;protected]</span></a>
                        </li>
                        <li>
                            <i class="ri-time-line"></i>
                            Mon-Sat 8:00 AM - 8:00 PM
                        </li>
                    </ul>
                    <ul class="social-link">
                        <li>
                            <span>Stay connected:</span>
                        </li>
                        <li>
                            <a href="javascript:;" target="_blank">
                                <i class="ri-facebook-fill"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" target="_blank">
                                <i class="ri-twitter-fill"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" target="_blank">
                                <i class="ri-linkedin-fill"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" target="_blank">
                                <i class="ri-instagram-fill"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="single-footer-widget">
                    <h3>Information</h3>
                    <ul class="import-link">
                        <li>
                            <a href="about.html">About</a>
                        </li>
                        <li>
                            <a href="order-tracking.html">Order Tracking</a>
                        </li>
                        <li>
                            <a href="terms-conditions.html">Terms & Conditions</a>
                        </li>
                        <li>
                            <a href="store-location.html">Store Location</a>
                        </li>
                        <li>
                            <a href="privacy-policy.html">Privacy Policy</a>
                        </li>
                        <li>
                            <a href="faq.html">Delivery Information</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="single-footer-widget">
                    <h3>Customer Service</h3>
                    <ul class="import-link">
                        <li>
                            <a href="faq.html">Help Center</a>
                        </li>
                        <li>
                            <a href="products.html">Products</a>
                        </li>
                        <li>
                            <a href="terms-conditions.html">Money-back Guarantee!</a>
                        </li>
                        <li>
                            <a href="blog.html">Blog</a>
                        </li>
                        <li>
                            <a href="privacy-policy.html">Accessibility</a>
                        </li>
                        <li>
                            <a href="contact.html">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="single-footer-widget">
                    <h3>Download App On Mobile</h3>
                    <p>30% discount on your first order</p>
                    <ul class="app-btn">
                        <li>
                            <a href="javascript:;" target="_blank">
                                <img src="/picture/app-store.png" alt="Image">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" target="_blank">
                                <img src="/picture/google-play.png" alt="Image">
                            </a>
                        </li>
                    </ul>
                    <span class="payment">We Accept Payment Via</span>
                    <ul class="payment-option">
                        <li>
                            <img src="/picture/payment-1.png" alt="Image">
                        </li>
                        <li>
                            <img src="/picture/payment-2.png" alt="Image">
                        </li>
                        <li>
                            <img src="/picture/payment-3.png" alt="Image">
                        </li>
                        <li>
                            <img src="/picture/payment-4.png" alt="Image">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="copy-right-area">
    <div class="container">
        <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://www.downdemo.com">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
        </p>
    </div>
</div>


<div class="go-top">
    <i class="ri-arrow-up-s-fill"></i>
    <i class="ri-arrow-up-s-fill"></i>
</div>


<script src="/js/jquery.min.js"></script>

<script src="/js/bootstrap.bundle.min.js"></script>

<script src="/js/meanmenu.min.js"></script>

<script src="/js/owl.carousel.min.js"></script>

<script src="/js/wow.min.js"></script>

<script src="/js/range-slider.min.js"></script>

<script src="/js/form-validator.min.js"></script>

<script src="/js/contact-form-script.js"></script>

<script src="/js/ajaxchimp.min.js"></script>

<script src="/js/custom.js"></script>

<script src="/layui/layui.all.js"></script>
<!--侧边导航栏-->
<script type="text/html" id="categoryitem">
    <li style="text-align: center">
        <a href="#">{{name}}</a>
    </li>
</script>
<script th:inline="javascript">
    const id=/*[[${id}]]*/;//订单id
    if(!id){
        location.href="/page/index";
    }
    $.ajax({
        url:'/order/payment',
        data:{id:id},
        success:function(result){
            let code=result.code;
            if(code==200){
                let imgcode=result.data;
                $("#qrcode").attr('src',"data:image/png;base64,"+imgcode);
            }else{
                layer.msg("订单异常",{icon:2});
                setTimeout(function(){
                    location.href="/page/index";
                },2000)
            }
        }
    });

    let stateimterval=setInterval(function(){
        $.ajax({
            url:"/order/getorderstate",
            data:{id:id},
            success:function(result){
                console.log("我被调用了!订单状态为:"+result.data);
                if(result.data==1){
                    layer.msg("支付成功",{icon:1});
                    clearInterval(stateimterval);
                    setTimeout(function () {
                        //跳转到首页
                        location.href="/page/orders";
                    },1800)
                }
            }
        })
    },1500)
</script>
<script>
    $.ajax({
        url: '/category/getchildren',
        data: {id: -1},
        success: function (result) {
            for (let i = 0; i < result.length; i++) {
                let item = $("#categoryitem").text();
                const $item = $(item);
                $item.find("a").text(result[i].name);
                $item.find("a").attr('href','/page/categoryproducts?pid='+result[i].id);
                $("#categorylist").append($item);
            }
        }
    });
</script>
</body>
</html>